﻿<div id="{{componentGroup.uid}}" class="row panel" ng-class="ctrl.activePanel===componentGroup.uid ? 'panel-active' : 'panel-default'"
    ng-repeat="componentGroup in ctrl.componentGroups | orderBy:['sortValue']">
    <div class="panel-heading pointer clearfix" ng-click="ctrl.setActivePanel(componentGroup.uid)">
        <span class="component-group-icon pull-right" ng-style="{color: ctrl.activePanel===componentGroup.uid ? 'white' : componentGroup.getSetting('app.image_color', '#427AB6')}"
            ng-class="componentGroup.getSetting('app.image_id', '')"></span>
        <span class="panel-title pull-left">{{componentGroup.getSetting("app.caption", "#" + componentGroup.uid)}}</span>
    </div>

    <ul class="list-group" ng-show="ctrl.activePanel===componentGroup.uid">
        <li class="list-group-item" ng-repeat="component in componentGroup.components | orderBy:['sortValue']">
            <div class="clearfix">
                <span class="component-icon" ng-style="{color: component.getSetting('app.image_color', '#427AB6')}"
                    ng-class="component.getSetting('app.image_id', 'fas fa-square')"></span>
                <span class="component-caption">{{component.getSetting("app.caption", "#" + component.uid)}}</span>
            </div>

            <div class="clearfix" style="padding-top: 10px;" ng-include="component.template"></div>

            <div class="clearfix">

                <span ng-if="component.getSetting('is_enabled', true)==false" class="component-status-text label label-danger">
                    <span class="fas fa-toggle-off"></span> Disabled
                </span>

                <span ng-if="component.getStatus('status.is_outdated', false)" class="component-status-text label label-warning">
                    <span class="fas fa-stopwatch"></span> <span>Outdated</span>
                </span>

                <span ng-if="component.getStatus('power.consumption', 0) > 0" class="component-status-text label label-warning">
                    <span class="fas fa-bolt"></span> <span>{{(component.getStatus('power.consumption') | number:0) + '
                        Wh'}}</span>
                </span>

            </div>
        </li>

        <li class="list-group-item" ng-show="componentGroup.macros.length > 0">
            <div class="clearfix" style="padding-top: 10px;" ng-repeat="macro in componentGroup.macros | orderBy:['sortValue']"
                ng-include="'views/macroTemplateView.html'"></div>
        </li>
    </ul>
</div>